<template>
    <div class="region-select-warpper">
        <Cascader :size="size" @on-change="onChange" v-model="selectedRegions" :data="regions"></Cascader>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Inject,
    Prop,
    Watch,
    Model
} from "vue-property-decorator";
import Util from "../lib/util";
import appconst from "../lib/appconst";
import AbpBase from "../lib/abpbase";
import Ajax from "../lib/ajax";
@Component({
    components: {}
})
export default class RegionSelect extends AbpBase {
    @Prop({ type: Number, default: null }) value: number;
    @Prop({ type: String, default: "small" }) size: string;
    regions = [];

    selectedRegions = [];

    onChange(value, selectedData) {
        //console.log(selectedData);
        let label: string = "";
        for (let i = 0; i < selectedData.length; i++) {
            const element = selectedData[i];
            label += element.label;
        }
        //console.log(label);
        this.$emit("on-change", label);
    }

    @Watch("selectedRegions")
    onChangeValue(newVal, oldVal) {
        this.$emit("input", newVal[2]);
    }
    @Watch("value")
    async onValueChanged(newVal, oldVal) {
        //console.log(newVal);
        //console.log(this.selectedRegions[2]);
        if (!newVal) {
            this.selectedRegions = [];
            return;
        }
        if (
            this.selectedRegions.length == 0 ||
            (this.selectedRegions.length == 3 &&
                newVal !== this.selectedRegions[2])
        ) {
            let reponse = await Ajax.get(
                "/api/services/app/Region/GetCasCadeIdById",
                { params: { id: newVal } }
            );
            //console.log(JSON.stringify(reponse.data.result));
            var res = reponse.data.result;

            this.selectedRegions = res;
        }
    }
    async created() {
        let reponse = await Ajax.get(
            "/api/services/app/Region/GetCasCadeData",
            {
                params: {}
            }
        );
        this.regions = reponse.data.result;
        //console.log(this.value);
    }
}
</script>

<style  scoped>
.region-select-warpper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
}
</style>